<template>
  <div class="app-container">
    <el-row style="margin-bottom: 20px;">
      <el-col :span="6">
        <el-radio-group v-model="params.group" @input="handleInput">
          <el-radio-button
            v-for="item in options.menuGroup.list"
            :label="item.value"
            :key="item.value"
          >
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="6">
        <span style="line-height: 40px;font-size: 1rem;width: 100px;text-align: right;padding-right: 15px;">名称</span>
        <el-input v-model="params.name" placeholder="请输入名称" style="width: 70%;" @keyup.enter.native="query"></el-input>
      </el-col>
    </el-row>
    <div>
      <div style="display: inline-block;margin-bottom: 20px;float: left;">
        <el-button type="primary" size="mini" @click="insert()" v-permission="'insert'">新增</el-button>
        <el-button type="danger" size="mini" @click="del()" v-permission="'del'">删除</el-button>
      </div>
      <div style="float: right;width: 200px;">
        <el-button type="primary" @click="query()" icon="el-icon-search">查询</el-button>
        <el-button type="primary" @click="reset()" icon="el-icon-refresh">重置</el-button>
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="menuTableTree"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      ref="page"
      @selection-change="handleSelectionChange"
      border
      :row-class-name="tableRowClassName"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column header-align="center" align='left' prop="name" label="名称" width="200"></el-table-column>
      <el-table-column align='center' prop="type" label="类型">
        <template slot-scope="scope">
<!--          PC端-->
          <el-tag v-if="scope.row.type === options.menuType.enum.MENU.value && scope.row.group === options.menuGroup.enum.PC.value">{{ scope.row.type | typeFormat }}</el-tag>
          <el-tag v-if="scope.row.type === options.menuType.enum.ROUTE.value && scope.row.group === options.menuGroup.enum.PC.value" type="success">
            {{ scope.row.type | typeFormat }}
          </el-tag>
          <el-tag v-if="scope.row.type === options.menuType.enum.BUTTON.value && scope.row.group === options.menuGroup.enum.PC.value" type="warning">
            {{ scope.row.type | typeFormat }}
          </el-tag>
<!--          PDA端-->
          <el-tag v-if="scope.row.type === options.menuTypePDA.enum.SERIES.value && scope.row.group === options.menuGroup.enum.PDA.value">{{ scope.row.type | typeFormatPDA }}</el-tag>
          <el-tag v-if="scope.row.type === options.menuTypePDA.enum.BUTTON.value && scope.row.group === options.menuGroup.enum.PDA.value" type="success">
            {{ scope.row.type | typeFormatPDA }}
          </el-tag>


        </template>
      </el-table-column>
      <el-table-column align='center' prop="code" label="编码"></el-table-column>
      <el-table-column align='center' prop="visible" label="是否可见"
                       v-if="params.group === options.menuGroup.enum.PC.value">
        <template slot-scope="scope">
          <el-tag :type="scope.row.visible === options.yesOrNo.enum.YES.value ? 'success':'info'">
            {{ scope.row.visible | yesOrNoFormat }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align='center' prop="icon" label="图标" v-if="params.group === options.menuGroup.enum.PC.value">
        <template slot-scope="{row}">
          <e-icon :icon-class="row.icon"></e-icon>
        </template>
      </el-table-column>
      <el-table-column align='center' prop="permission" label="权限标识"
                       v-if="params.group === options.menuGroup.enum.PC.value"></el-table-column>
      <el-table-column align='center' prop="group" label="分组">
        <template slot-scope="{row}">
          {{ options.menuGroup.map[row.group] }}
        </template>
      </el-table-column>
      <el-table-column align='center' prop="sorting" label="排序"
                       v-if="params.group === options.menuGroup.enum.PC.value"></el-table-column>
      <el-table-column align='center' fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="edit(scope.row)" v-permission="'edit'">修改</el-button>
          <el-button type="text" size="mini" @click="detail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title='formTitle' :visible.sync="formVisible" width="1000px" :before-close="formClose"
               append-to-body
               v-dialog-drag>
      <el-form ref="form" :model="formData" label-width="80px" :rules="rules" style="width:960px">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="group" label="分组">
              <el-select placeholder="请输入分组" v-model="formData.group" style="width:320px">
                <el-option
                  v-for="(item) in options.menuGroup.list"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="parentId" label="父菜单">
              <el-cascader
                v-if="formData.group === options.menuGroup.enum.PC.value"
                ref="cascader"
                filterable
                v-model="formData.parentId"
                :options="menuTree"
                :props="{ checkStrictly: true, emitPath: false, label: 'name', value: 'id'}"
                :show-all-levels="true"
                style="width:320px">
                <template #default="{node, data}">
                  <span :class="'menu_type_'+ data.type">{{ data.name }}</span>
                </template>
              </el-cascader>

              <el-cascader
                v-else="formData.group === options.menuGroup.enum.PDA.value"
                ref="cascader"
                filterable
                v-model="formData.parentId"
                :options="menuTreePDA"
                :props="{ checkStrictly: true, emitPath: false, label: 'name', value: 'id'}"
                :show-all-levels="true"
                style="width:320px">
                <template #default="{node, data}">
                  <span :class="'menu_type_'+ data.type">{{ data.name }}</span>
                </template>
              </el-cascader>

            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="type" label="类型">
              <el-select placeholder="请输入类型" v-model="formData.type" style="width:320px"
                         v-if="formData.group === options.menuGroup.enum.PC.value">
                <el-option
                  v-for="(item) in options.menuType.list"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select placeholder="请输入类型" v-model="formData.type" style="width:320px"
                         v-if="formData.group === options.menuGroup.enum.PDA.value">
                <el-option
                  v-for="(item) in options.menuTypePDA.list"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="name" label="名称">
              <el-input type="text" placeholder="请输入名称" v-model="formData.name" maxlength="20" clearable
                        style="width:320px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12"
                  v-if="formData.type != options.menuType.enum.BUTTON.value && formData.group === options.menuGroup.enum.PC.value">
            <el-form-item prop="icon" label="菜单图标">
              <e-icon-select placeholder="请输入菜单图标" v-model="formData.icon" clearable style="width:320px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12"
                  v-if="formData.type == options.menuType.enum.ROUTE.value && formData.group === options.menuGroup.enum.PC.value">
            <el-form-item prop="path" label="路由地址" :rules='[{required: true, message: "请输入路由地址", trigger: "blur"}]'>
              <el-input type="text" placeholder="请输入路由地址" v-model="formData.path" maxlength="50" clearable
                        style="width:320px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12"
                  v-if="formData.type == options.menuType.enum.ROUTE.value  || formData.group === options.menuGroup.enum.PDA.value">
            <el-form-item prop="code" label="编码" :rules='[{required: true, message: "请输入路由编码", trigger: "blur"}]'>
              <el-input type="text" placeholder="请输入编码" v-model="formData.code" maxlength="50" clearable
                        style="width:320px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12"
                  v-if="formData.type == options.menuType.enum.BUTTON.value  && formData.group === options.menuGroup.enum.PC.value">
            <el-form-item prop="permission" label="权限标识"
                          :rules='[{required: true, message: "请输入权限标识", trigger: "blur"}]'>
              <el-input type="text" placeholder="请输入权限标识" v-model="formData.permission" maxlength="20" clearable
                        style="width:320px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12"
                  v-if="formData.type !== options.menuType.enum.BUTTON.value && formData.group === options.menuGroup.enum.PC.value">
            <el-form-item prop="sorting" label="顺序">
              <el-input-number
                v-model="formData.sorting"
                controls-position="right"
                :min="1"
                placeholder="请填写顺序"
                clearable
                width="300px"
                style="width: 320px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12"
                  v-if="formData.type === options.menuType.enum.ROUTE.value && formData.group === options.menuGroup.enum.PC.value">
            <el-form-item prop="tableInfoIds" label="关联表">
              <el-select
                clearable
                filterable
                multiple
                v-model="formData.tableInfoIds"
                style="width: 320px"
              >
                <el-option-group
                  v-for="group in options.tableInfoList"
                  :key="group.value"
                  :label="group.label"
                >
                  <el-option
                    v-for="item in group.options"
                    :label="item.tableName"
                    :value="item.id"
                    :key="item.id"
                    :title="item.tableComment"
                  />
                </el-option-group>

              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="visible"
                          v-if="formData.type != options.menuType.enum.BUTTON.value && formData.group === options.menuGroup.enum.PC.value"
                          label="是否可见">
              <e-switch
                v-model="formData.visible"
              >
              </e-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button :loading="formLoading" type="primary" @click="formSave">保存</el-button>
        <el-button @click="formClose">关闭</el-button>
      </template>
    </el-dialog>
    <el-dialog title="详情" :visible.sync="detailVisible" append-to-body width="960px" :before-close="detailClose"
               v-dialog-drag>
      <el-descriptions direction="horizontal" border labelClassName="descLabel" contentClassName="descContent"
                       :column="2">
        <el-descriptions-item label="名称">{{ detailData.name }}</el-descriptions-item>
        <el-descriptions-item label="分组">{{ detailData.group |menuGroupFormat }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{ detailData.type | typeFormat }}</el-descriptions-item>
        <el-descriptions-item label="路由编码">{{ detailData.code }}</el-descriptions-item>
        <el-descriptions-item label="菜单图标">{{ detailData.icon }}</el-descriptions-item>
        <el-descriptions-item label="是否可见">{{ detailData.visible |yesOrNoFormat }}</el-descriptions-item>
        <el-descriptions-item label="权限标识">{{ detailData.permission }}</el-descriptions-item>
        <el-descriptions-item label="路由地址">{{ detailData.path }}</el-descriptions-item>
        <el-descriptions-item label="排序">{{ detailData.sorting }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ detailData.createBy | userFormat }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detailData.createTime | dateTimeFormat }}</el-descriptions-item>
        <el-descriptions-item label="修改人">{{ detailData.updateBy | userFormat }}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{ detailData.updateTime | dateTimeFormat }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="detailClose">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
/* 菜单 */
/*/deep/ .menu-row {*/
/*  color: #fff6fc;*/
/*}*/
/*!* 路由 *!*/
/*/deep/ .route-row {*/
/*  color: #e2ffea;*/
/*}*/
/*!* 按钮 *!*/
/*/deep/ .button-row {*/
/*  color: #f2f2f2;*/
/*}*/

</style>
<script src="./index.js"/>
